<template>
  <div>
    <el-row style="background-color: white">
      <el-col :span="5">
        <a style="color: #606266" href="#">首页</a>
        <a style="color: #dcdfe6" href="#">/ 资产管理 </a>
        <a style="color: #dcdfe6" href="#">/ 楼栋信息</a></el-col
      >
    </el-row>
    <hr />
    <el-row style="background-color: white">
      <el-col :span="2">查询条件</el-col>
    </el-row>
    <el-row style="background-color: white">
      <el-col :span="8"
        ><el-input
          placeholder="请输入楼栋id"
          style="margin-left: 20px"
          clearable
          v-model="loudongid"
        >
        </el-input>
      </el-col>

      <el-col :span="6"
        ><el-input
          placeholder="请输入楼栋名称"
          style="margin-left:80px"
          clearable
          v-model="loudongname"
        >
        </el-input>
      </el-col>
      <el-col :span="6"><el-button @click="find()" type="primary" icon="el-icon-search">搜索</el-button></el-col>
    </el-row>
<hr />
    <el-row>
      <el-col :span="1">
        <el-button type="primary" style="margin-left: 1100px"  @click="dialogFormVisible = true">添加楼栋<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-col>
      <el-dialog :append-to-body="true" title="添加楼栋信息" :visible.sync="dialogFormVisible">
        <el-form>
        <el-form-item label="楼栋编号" label-width="100px">
           <el-input
            v-model="addinfo.id"
            placeholder="必填，请填写楼栋编号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="楼栋名称" label-width="100px">
          <el-input
          v-model="addinfo.lname"
          placeholder="必填，请填写楼栋名称"
           autocomplete="off">
           </el-input>
        </el-form-item>
        <el-form-item label="面积" label-width="100px">
          <el-input
          v-model="addinfo.area"
          placeholder="必填，请填写面积"
           autocomplete="off">
           </el-input>
        </el-form-item>
        </el-form>
        <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">保存</el-button>
        </div>
      </el-dialog>
      <el-dialog
      :append-to-body="true"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>该楼栋编号已存在！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--修改信息页面-->
    <el-dialog :append-to-body="true" title="修改信息" :visible.sync="dialogFormVisibleupdate">
      <el-form>

        <el-form-item label="楼栋编号" label-width="120px">
          <el-input
          placeholder="编号不可更改"
          v-model="updinfo.buildingId"
          :disabled="true">
        </el-input>
        </el-form-item>

        <el-form-item label="楼栋名称" label-width="120px">
          <el-input
            v-model="updinfo.name"
            placeholder="必填，请填写楼栋名称"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="建筑面积" label-width="120px">
          <el-input
            v-model="updinfo.area"
            placeholder="必填，请填写建筑面积"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="upd2()">保存</el-button>
      </div>
    </el-dialog>
    </el-row>
    <template>
      <el-table :data="pagination.records" style="width: 100%">
          <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="buildingId" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="area" label="建筑面积" width="180">
        </el-table-column>
        <el-table-column prop="buildingId" label="楼栋ID" width="180">
        </el-table-column>
        <el-table-column prop="admin.username" label="创建员工" width="180">
        </el-table-column>
        <el-table-column label="操作"> 
            <template slot-scope="scope">
          <el-button
            type="warning"
            @click="upd(scope.row)"
            plain 
            >修改</el-button
          >
          <el-button type="danger" @click="deleteParkinglot(scope.row)" plain
            >删除</el-button
          >
        </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addinfo:{
        id:"",
        lname:"",
        area:""
      },
      updinfo:{
      },
      dialogFormVisibleupdate:false,
      dialogVisible:false,
      dialogFormVisible: false,
      loudongid:"",
      loudongname:"",
      pagination:[]
    };
  },
  methods:{
    deleteParkinglot(row){
      let url="/loudong/del";
      let param={id:row.buildingId};
      this.$axios.post(url,param).then(reps=>{this.find();})
    },
      upd2(){
        let url="/loudong/upd";
        let params={id:this.updinfo.buildingId,lname:this.updinfo.name,area:this.updinfo.area};
        this.$axios.post(url,params).then(resp=>{if(resp.data.success){this.dialogFormVisibleupdate=false;this.find();}})
      },
      upd(row){
        this.dialogFormVisibleupdate=true;
        this.updinfo=row;
        console.log(row);
      },
      add(){
        let url="/loudong/add";
        let adminid=JSON.parse(window.sessionStorage.getItem('Authorization'));
        let params={id:this.addinfo.id,lname:this.addinfo.lname,area:this.addinfo.area,adminid:adminid.id};
        this.$axios.post(url,params).then(resp=>{if(resp.data.success){this.dialogFormVisible = false;this.find();}else{this.dialogVisible=true}});
      },
      find(page = 1, pageSize = 5){
        let url="/loudong/Info";
        console.log(page);
        let params={page:page,pageSize:pageSize,id:this.loudongid,lname:this.loudongname};
        console.log(params);
        this.$axios.post(url,params).then(resp=>{this.pagination = resp.data.result;console.log(this.pagination)});
      },
      handleSizeChange(pageSize) {
      this.find(this.pagination.current, pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    },
  }, mounted() {
    this.find();
  }
};
</script>

<style>
</style>
